<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.html">

    <title>费用列表</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" href="assets/bootstrap-datepicker/css/datepicker.css" />
    <link rel="stylesheet" type="text/css" href="assets/bootstrap-colorpicker/css/colorpicker.css" />
    <link rel="stylesheet" type="text/css" href="assets/bootstrap-daterangepicker/daterangepicker.css" />

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />




    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->


  </head>

  <body>

  <section id="container" class="">
      <!--header start-->
      <header class="header white-bg">
          <div class="sidebar-toggle-box">
              <div data-original-title="" data-placement="right" class="icon-reorder tooltips"></div>
          </div>
          <!--logo start-->
          <a href="#" class="logo">车辆<span>管理系统</span></a>
          <!--logo end-->
         
          <div class="top-nav ">
              <ul class="nav pull-right top-menu">
                  <li>
                      <input type="text" class="form-control search" placeholder="Search">
                  </li>
                  <!-- user login dropdown start-->
                  <li class="dropdown">
                      <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                          <img alt="" src="img/avatar1_small.jpg">
                          <span class="username">嘿嘿</span>
                          <b class="caret"></b>
                      </a>
                      <ul class="dropdown-menu extended logout">
                          <div class="log-arrow-up"></div>
                          <li><a href="#"><i class=" icon-suitcase"></i>个人资料</a></li>
                          <li><a href="#"><i class="icon-cog"></i>设置</a></li>
                          <li><a href="#"><i class="icon-bell-alt"></i> 通知</a></li>
                          <li><a href="login.html"><i class="icon-key"></i> 退出</a></li>
                      </ul>
                  </li>
                  <!-- user login dropdown end -->
              </ul>
          </div>
      </header>
      <!--header end-->
      <!--sidebar start-->
      <aside>
          <div id="sidebar"  class="nav-collapse ">
              <!-- sidebar menu start-->
              <ul class="sidebar-menu">
                  <li class="">
                      <a class="" href="index.html">
                          <i class="icon-dashboard"></i>
                          <span>首页</span>
                      </a>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-book"></i>
                          <span>车辆基本信息管理</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="general.html">车辆列表</a></li>
                          <li><a class="" href="buttons.html">新增车辆</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-cogs"></i>
                          <span>车主信息管理</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="grids.html">车主列表</a></li>
                          <li><a class="" href="calendar.html">新增车主</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu active">
                      <a href="javascript:;" class="">
                          <i class="icon-tasks"></i>
                          <span>车辆管理费</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li class="active"><a class="" href="form_component.html">费用列表</a></li>
                          <li><a class="" href="form_wizard.html">收取管理费</a></li>
                      </ul>
                  </li>
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-th"></i>
                          <span>车辆变更管理</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="basic_table.html">车辆变更列表</a></li>
                          <li><a class="" href="dynamic_table.html">新增车辆变更</a></li>
                      </ul>
                  </li>
                
                  <li class="sub-menu">
                      <a href="javascript:;" class="">
                          <i class="icon-glass"></i>
                          <span>系统管理</span>
                          <span class="arrow"></span>
                      </a>
                      <ul class="sub">
                          <li><a class="" href="blank.html">用户管理</a></li>
                          <li><a class="" href="profile.html">修改密码</a></li>
                          <li><a class="" href="invoice.html">安全退出</a></li>
                      </ul>
                  </li>
                  <li>
                      <a class="" href="login.html">
                          <i class="icon-user"></i>
                          <span>登录</span>
                      </a>
                  </li>
              </ul>
              <!-- sidebar menu end-->
          </div>
      </aside>
      <!--sidebar end-->
      <!--main content start-->
       <section id="main-content">
          <section class="wrapper">
              <!-- page start-->
              <div class="row">
                  <div class="col-lg-12">
                      <section class="panel">
                          <header class="panel-heading">
                              费用列表
                          </header>
                          <div class="panel-body bio-graph-info">
                             <form role="form" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-1 control-label" for="carNumber">车牌号</label>
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control" id="carNumber" /><!--  -->
                                    </div>
                                    <label class="col-lg-1 control-label" for="pay_year">年份</label>
                                    <div class="col-lg-2">
                                          <select name="sample_1_length" id="pay_year" aria-controls="sample_1" class="form-control">
                                          <option value="全部" selected="selected">全部</option>
                                          <option value="2013年">2013年</option>
                                          <option value="2014年">2014年</option>
                                          <option value="2015年">2015年</option>
                                          <option value="2016年">2016年</option>
                                          <option value="2017年">2017年</option>
                                          </select>
                                      </div>
                                    <label class="col-lg-1 control-label" for="payfm">月份</label>
                                    <div class="col-lg-1">
                                        <input type="text" class="form-control" id="payfm" value="1" /><!--  -->
                                    </div>
                                    <label class="col-lg-1 control-label" for="payem">------------</label>
                                    <div class="col-lg-1">
                                        <input type="text" class="form-control" id="payem" value="12" /><!--  -->
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-1 control-label" for="recript">收据号</label>
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control" id="recript"/><!--  -->
                                    </div>
                                    <label class="col-lg-1 control-label" for="payday" >缴费日期</label>
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control" id="payday" value="2013-09-09" /><!--  -->
                                    </div>  
                                
                                <div class="col-lg-5">
                                      <button class="btn btn-shadow btn-primary" onclick="querys();return false;">查询</button>
                                </div>
                                </div>
                          </form>
                          </div>
                          <table class="table table-striped border-top" id="sample_1">
                            <thead>
                              <tr>
                                  <!-- <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th> -->
                                  <th>车牌号</th>
                                  <th>收据号</th>
                                  <th>交款人</th>
                                  <th>交费日期</th>
                                  <th>缴纳金额</th>
                                  <th>备注</th>
                              </tr>
                            </thead>
                            <tbody id="content">
                             
                              <!-- <tr class="odd gradeX">
                                  <td><input type="checkbox" class="checkboxes" value="1" /></td>
                                  <td>Jhone doe</td>
                                  <td class="hidden-phone">100</td>
                                  <td class="hidden-phone">02.03.2013</td>
                                  <td class="hidden-phone">10</td>
                                  <td class="hidden-phone">
                                    <button class="btn btn-success btn-xs"><i class="icon-eye-open view"></i>
                                    </button>
                                    <button class="btn btn-primary btn-xs"><i class="icon-pencil"></i></button>
                                    <button class="btn btn-danger btn-xs"><i class="icon-trash "></i></button>

                                  </td>
                              </tr> -->
                            </tbody>
                          </table>
                      </section>
                  </div>
              </div>
              <!-- page end-->
          </section>
      </section>
      <!--main content end-->
  </section>

      <!-- js placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script type="text/javascript" src="assets/data-tables/jquery.dataTables.js"></script>
    <script type="text/javascript" src="assets/data-tables/DT_bootstrap.js"></script>

    <!--common script for all pages-->
    <script src="js/common-scripts.js"></script>
    <!--script for this page only-->
    <script src="js/dynamic-table.js"></script>

    <script src="js/Underscore.js"></script>
		
		<script src="js/json2.js"></script>
		<script type="text/javascript">
			function querys() {
				var carId = $('#carNumber').val(),
				pay_year = $('#pay_year').val(),
				recript_id = $('#recript').val(),
				starttime = $('#payfm').val(),
				endtime = $('#payem').val(),
				pay_time = $('#payday').val();
				
				var datalist = {
					'carId': carId,
					'pay_year': pay_year,
					'recript_id': recript_id,
					'pay_time':pay_time,
					'starttime': starttime,
					'endtime': endtime, 
					'start': 0,
					'count': 10
				};
				var dd = JSON.stringify(datalist);
				$.ajax({
					url: 'carcharge_querys.action', // 请求的地址
					type: 'POST',
					dataType: 'json',
					data: "data=" + dd,

					success: function(datas) {
						if(datas.code == 0) {
							alert(datas.data);
							console.log('请求出错');
							return false;
						}
						//取出datas中包含的数组data并遍历取值
						var arr = datas.data;
						var t = _.template($("#temp").html());
						$("#content").html(t(arr));
					}
				})
			}
			
		</script>
		<script type="text/template" id="temp">
			<% _.each(obj, function (index,item) { %>
			<tr class="odd gradeX">
				<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
				<td class="hidden-phone">
					<%=index.carId %>
				</td>
				<td class="hidden-phone">
					<%=index.recript_id %>
				</td>
                <td class="hidden-phone">
					<%=index.hand_fee_person %>
				</td>
				<td class="hidden-phone">
					<%=index.pay_time %>
				</td>
				<td class="hidden-phone">
					<%=index.pay_fee %>
				</td>
				<td class="hidden-phone">
					<%=index.comment %>
                </td>
			</tr>
			<% }); %>
		</script>

  </body>
</html>
